
<template>
  <div class="singer-category">
    <ul class="singer-ui" v-for="(v,i) of  categoryList" :key="i">
      <li v-for="(item,z) in v" :key="item.id" :class="[activeIndex[i]=== z ? 'active':'']" @click="categoryClick(i,z)">{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    categoryList: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      activeIndex: {
        sex: 0,
        genre: 0,
        area: 0
      }
    }
  },
  methods: {
    categoryClick(key, index) {
      this.activeIndex[key] = index
      let params = {}
      for (let k in this.activeIndex) {
        params[k] = this.categoryList[k][this.activeIndex[k]].id
      }
      this.$emit('category-click', params)
    }
  }
}
</script>

<style scoped>
.singer-category {
  padding: 0 10px 10px;
  color: rgba(255, 255, 255, 0.3);
}
.singer-ui {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
.singer-ui li {
  padding: 5px;
  margin: 3px;
  font-size: 14px;
}
.active {
  color: #fff;
  background-color: #919191;
  border-radius: 5px;
}
</style>